<template>
<div>
    <h1>居民显示</h1>
    姓名
    <input type="text" v-model="dataPs.name">
    居民类型
    <select v-model="dataPs.type">
        <option value="0">请选择</option>
        <option v-for="d in La" :value="d.tid">{{d.tname}}</option>
    </select>

    <input type="button" value="查询" @click="Show">
    <input type="button" value="重置" @click="chongzhi">
    <input type="button" value="批量删除" @click="Del">
    <input type="button" value="批量修改" @click="Upd">


    <table class="table">
       <thead>
            <tr>
                <td><input type="checkbox" v-model="quan" @change="qx"></td>
                <td>Id</td>
                <td>头像</td>
                <td>姓名</td>
                <td>类型</td>
                <td>楼栋</td>
                <td>房间</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
       </thead>

       <tbody>
        <tr v-for="d in data">
                <td><input type="checkbox" v-model="fan" :value="d.id"></td>
                <td>{{d.id}}</td>
                <td>
                    <img :src="'https://localhost:7094/'+d.img" style="width: 60px; height: 80px;">
                </td>
                <td>{{d.name}}</td>
                <td>{{d.tname}}</td>
                <td>{{d.louDong}}</td>
                <td>{{d.fangJian}}</td>
                <td>{{d.zt==1?'已审核':'未审核'}}</td>
                <td>
                    <input type="button" value="修改" @click="Update(d.id)">
                </td>
            </tr>
       </tbody>
    </table>

一共{{pagedata.count}}条 每页{{dataPs.size}}条 一共{{pagedata.listcount}}页 当前第{{dataPs.index}}页

<br>

<input type="button" value="首页" @click="fenye(1)">
<input type="button" value="上一页" @click="fenye(2)">

<input type="button" v-for="d in pagedata.listcount" :value="d" @click="shuzi(d)">

<input type="button" value="下一页" @click="fenye(3)">
<input type="button" value="尾页" @click="fenye(4)">

<input type="number" v-model="dataPs.index"><input type="button" value="跳转" @click="tiao">


<select v-model="dataPs.size" @click="tiao1()">
    <option value="1">1</option>
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="9">9</option>
    <option value="12">12</option>
</select>

</div>

</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router=useRouter()

onMounted(()=>{
    Show();
    Xia()
})

//全选全不选
const quan=ref(false)
const fan=ref([])

const qx=()=>{
    if(quan.value){
        data.value.forEach(x=>{
            fan.value.push(x.id)
        })
    }else{
        fan.value=[]
    }
}
//批量删除
const Del=()=>{
    if(!confirm("确认删除吗")){
        return;
    }
    axios.delete("/api/JuMin/Delted",{params:{idstring:fan.value.toString()}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            Show()
        }else{
            alert("删除失败");
        }
    })
}

//批量修改
const Upd=()=>{
    if(!confirm("确认修改吗")){
        return;
    }
    axios.get("/api/JuMin/Updstate",{params:{idstring:fan.value.toString()}}).then(res=>{
        if(res.data>0){
            alert("修改成功");
            Show()
        }else{
            alert("修改失败");
        }
    })
}



const data=ref([{
    "id": 4,
      "name": "李四",
      "typeid": 1,
      "img": "/img/1.jpg",
      "isDeleted": true,
      "louDong": "2栋",
      "fangJian": "101号",
      "zt": 2,
      "tid": 1,
      "tname": "业主"
}])


const fenye=(val:any)=>{
    if(val==1){
        dataPs.value.index=1
    }
    if(val==2){
        if(dataPs.value.index>1){
            dataPs.value.index-=1
        }
    }
    if(val==3){
        if(dataPs.value.index<pagedata.value.listcount){
            dataPs.value.index+=1
        }
    }
    if(val==4){
         dataPs.value.index=pagedata.value.listcount
    }
    Show()
}

const shuzi=(val:any)=>{
    dataPs.value.index=val
    Show()
}

const tiao=(val:any)=>{
    if(dataPs.value.index>0&&dataPs.value.index<pagedata.value.listcount){
        Show()
    }else{
        Show()
    }
}

const tiao1=()=>{
    dataPs.value.index=1
    Show()
}

const dataPs=ref({
    name:'',
    type:0,
    index:1,
    size:3
})


//重置按钮
const chongzhi=()=>{
    dataPs.value={
            name:'',
    type:0,
    index:1,
    size:3
    }
}


const pagedata=ref({
    count:0,
    listcount:0
})

const Show=()=>{
    axios.get("/api/JuMin/Show",{params:dataPs.value}).then(res=>{
        data.value=res.data.list

        pagedata.value.count=res.data.count
        pagedata.value.listcount=Math.ceil(pagedata.value.count/dataPs.value.size)
    })
}

const La=ref([{
    "tid": 0,
    "tname": ""
}])

const Xia=()=>{
    axios.get("/api/JuMin/Xia").then(res=>{
        La.value=res.data
    })
}


const Update=(id:any)=>{
    router.push({path:"/Update",query:{id:id}})
}





</script>

<style lang="scss" scoped>

</style>